<script setup lang="ts">
import { initRouter } from '@/router/utils';
import { storageLocal } from '@pureadmin/utils';
import { type CSSProperties, ref, computed } from 'vue';
import { useUserStoreHook } from '@/store/modules/user';
import { usePermissionStoreHook } from '@/store/modules/permission';

defineOptions({
  name: 'PermissionPage'
});

const elStyle = computed((): CSSProperties => {
  return {
    width: '85vw',
    justifyContent: 'start'
  };
});

const username = ref(useUserStoreHook()?.username);

const options = [
  {
    value: 'admin',
    label: '管理员角色'
  },
  {
    value: 'common',
    label: '普通角色'
  }
];

function onChange() {
  useUserStoreHook()
    .loginByUsername({ username: username.value, password: 'admin123' })
    .then(res => {
      if (res.success) {
        storageLocal().removeItem('async-routes');
        usePermissionStoreHook().clearAllCachePage();
        initRouter();
      }
    });
}
</script>

<template>
  <div>
    <p class="mb-2!">
      模拟后台根据不同角色返回对应路由，观察左侧菜单变化（管理员角色可查看系统管理菜单、普通角色不可查看系统管理菜单）
    </p>
    <el-card shadow="never" :style="elStyle">
      <template #header>
        <div class="card-header">
          <span>当前角色：{{ username }}</span>
        </div>
      </template>
      <el-select v-model="username" class="w-[160px]!" @change="onChange">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-card>
  </div>
</template>
